<template>
  <div ref="container">
    <a-modal
      :title="$t('title.chequeBankNameList')"
      :width="800"
      :visible="visible"
      :getContainer="() => $refs.container"
      :maskStyle="{'top':'93px','left':'154px'}"
      :wrapClassName="wrapClassNameInfo()"
      :mask="isDesktop()"
      :maskClosable="false"
      @cancel="handleCancel"
      :cancelText="$t('button.close')"
      :footer="null"
      style="top:20px;height: 95%;">

      <!-- 操作按钮区域 -->
      <div class="table-operator" style="margin-bottom: 10px">
        <a-row>
          <a-col :span="16">
            <a-input-search
              v-model="bankName"
              :placeholder="$t('placeholder.pleaseInputBankName')"
              :enter-button="$t('button.add')"
              @search="handleAdd"
            />
          </a-col>
        </a-row>
      </div>

      <!-- table区域 -->
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange">
        <template slot="action" slot-scope="text, record">
          <a-popconfirm :title="$t('title.confirmDelete')" @confirm="() => handleDelete(record)">
            <a>{{ $t('button.delete') }}</a>
          </a-popconfirm>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {mixinDevice} from '@/utils/mixin'
import {getAction, postAction} from '@/api/manage'

export default {
  name: 'ChequeBankNameModal',
  mixins: [JeecgListMixin, mixinDevice],
  data() {
    return {
      visible: false,
      bankName: '',
      columns: [
        {title: this.$t('search.bankName'), dataIndex: 'name', width: '80%'},
        {
          title: this.$t('dynamic.operation'),
          dataIndex: 'action',
          width: '20%',
          align: 'center',
          scopedSlots: {customRender: 'action'}
        }
      ],
      url: {
        list: 'cheque/bankName/list',
        delete: 'cheque/bankName/delete',
        add: 'cheque/bankName/add'
      },
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      loading: false
    }
  },
  methods: {
    show() {
      this.visible = true
      this.loadData(1)
    },
    loadData(pageNum) {
      this.loading = true
      getAction(this.url.list).then(res => {
        if (res.code === 200) {
          // 将字符串数组转换为对象数组
          if (res.data && res.data.rows && res.data.rows.length > 0) {
            this.dataSource = res.data.rows.map((name, index) => ({
              id: index + 1,
              name: name
            }))
            this.ipagination.total = res.data.total
          }
        }
        this.loading = false
      })
    },
    handleCancel() {
      this.visible = false
    },
    handleAdd() {
      if (!this.bankName) {
        this.$message.warning(this.$t('message.pleaseInputBankName'))
        return
      }

      postAction(this.url.add, {name: this.bankName}).then(res => {
        if (res.code === 200) {
          this.$message.success(this.$t('message.operationSuccess'))
          this.bankName = ''
          this.loadData(1)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleDelete(record) {
      postAction(this.url.delete, {name: record.name}).then((res) => {
        if (res.code === 200) {
          this.$message.success(this.$t('message.deleteSuccess'))
          this.loadData(1)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleTableChange(pagination, filters, sorter) {
      this.ipagination = pagination
      this.loadData(pagination.current)
    }
  }
}
</script>